<template>
  <div class="review-bar">
    <div class="review-bar-chart">
      <VptBar :width="width"
              :height="height"
              :chartData="list"
              autoRander
              :xAxisData="xData"
              :grid="grid"
              :color="color"></VptBar>
    </div>
  </div>
</template>

<script setup>
import VptBar from "@/components/echarts/vpt-bar/index.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { computed } from "vue";

const props = defineProps({
  width: { type: String, default: "4.4rem" },
  height: { type: String, default: "2.1rem" },
  passData: { type: Array, default: () => [] },
  // 是否为横屏
  isLandscape: { type: Boolean, default: false },
});

const list = computed(() => {
  return props.passData.length
    ? [props.passData.map((item) => item.value)]
    : [];
});

const xData = computed(() => {
  return props.passData.map((item) => item.name);
});

const grid = {
  top: fontSize(10),
  bottom: fontSize(0),
};
const color = ["#1AC6FF"];
</script>

<style lang="less" scoped>
.review-bar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.12rem 0;
  box-sizing: border-box;

  .review-bar-header {
    // font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 0.14rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.16rem 0.05rem;
  }

  .review-bar-chart {
    flex: 1;
    height: 0;
  }
}
</style>
